<div class="skos-concept">
  <div class="top top-alt">
    <div class="btn-group pull-right">
      <button class="btn btn-default"
              title="{{'moveToTopConcept' | translate}}"
              ng-click="topConcept(concept.thesaurus)">
        <i class="fa fa-level-up"/></i>
      </button>
      <button class="btn btn-default dropdown-toggle"
              type="button"
              id="previous"
              data-toggle="dropdown"
              data-ng-disabled="!concept.previous"
              title="{{'previousKeywords' | translate}}">
        <i class="fa fa-angle-left"/>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="previous">
        <li role="presentation" ng-repeat="c in concept.previous">
          <a class="skos-concept-relation-previous"
             ng-click="navigateConcept(c, true)">
              <span role="menuitem"
                    tabindex="-1"
                    skos-label="c"
                    lang="{{language}}"></span>
          </a>
        </li>
      </ul>
    </div>
    <strong>{{'currentConcept' | translate}}</strong>
    <button class="btn btn-link"
            data-ng-disabled="concept.prefLabel[language] == 'topConcepts'"
            ng-click="addConcept(concept)">
        <span ng-if="prefLabel"
              skos-label="concept"
              lang="{{language}}"></span>
      <i class="fa fa-plus-circle"/>
    </button>
    <hr/>
  </div>

  <!-- TODO: use language, too -->
  <div ng-if="altLabel.length" class="skos-concept-altlabel">
    <ul>
      <li ng-repeat="alt in altLabel">
        <span ng-if="$index < 5" style="display:inline">{{alt}}</span>
        <span style="margin-left:-4px;margin-right:3px;"
              ng-if="$index < 4 && $index < altLabel.length-1">, </span>
      </li>
    </ul>
  </div>
  <div ng-if="broader.length || narrower.length || related.length"
       class="skos-concept-connected">
    <div ng-if="broader.length">
      <strong>{{'parentConcept' | translate}}</strong>
      <hr/>
      <ul>
        <li ng-repeat="c in broader"
            data-ng-mouseover="initConceptNavigationHelp(c)">
          <a class="skos-btn-icons btn-small btn-link"
             ng-click="addConcept(c)">
            <i class="fa fa-plus-circle"
               title="{{'addConcept' | translate}}"></i>
          </a>&nbsp;
          <a class="btn-small btn-link"
             ng-click="navigateConcept(c)"
             ng-mouseenter="c.over = true"
             ng-mouseleave="c.over = false">

            <i title="{{c.help.broader}}"></i>
                    <span skos-label="c"
                          lang="{{mainLanguage}}"
                          title="{{'makeConceptCurrent' | translate}}"></span>
          </a>
        </li>
      </ul>
    </div>
    <div ng-if="narrower.length">
      <strong>{{'moreSpecificConcept' | translate}}</strong>
      <hr/>
      <ul>
        <li ng-repeat="c in narrower"
            data-ng-mouseover="initConceptNavigationHelp(c)">
          <a class="skos-btn-icons btn-small btn-link "
             ng-click="addConcept(c)">
            <i class="fa fa-plus-circle"
               title="{{'addConcept' | translate}}"></i>
          </a>&nbsp;
          <a class="btn-small btn-link"
             ng-click="navigateConcept(c)"
             ng-mouseenter="c.over = true"
             ng-mouseleave="c.over = false">

            <i title="{{c.help.narrower}}"></i>
                    <span skos-label="c" lang="{{mainLanguage}}"
                          title="{{'makeConceptCurrent' | translate}}"></span>
          </a>
        </li>
      </ul>
    </div>
    <div ng-if="related.length">
      <strong>{{'associatedConcept' | translate}}</strong>
      <hr/>
      <ul>
        <li ng-repeat="c in related"
            data-ng-mouseover="initConceptNavigationHelp(c)">
          <a class="skos-btn-icons btn-small btn-link"
             ng-click="addConcept(c)">
            <i class="fa fa-plus-circle"
               title="{{'addConcept' | translate}}"></i>
          </a>&nbsp;
          <a class="btn-small btn-link"
             ng-click="navigateConcept(c)"
             ng-mouseenter="c.over = true"
             ng-mouseleave="c.over = false">
            <i title="{{c.help.related}}"></i>
                    <span skos-label="c" lang="{{mainLanguage}}"
                          title="{{'makeConceptCurrent' | translate}}"></span>
        </li>
      </ul>
    </div>
  </div>
  <!-- TODO: select by language, only show a limited number -->
  <div ng-if="!isEmptyObject(note)" style="margin-top:10px;">
    <div ng-repeat="note in note.en"
         style="width:100%;padding:4px 6px;border:1px solid #ddd;margin-top:8px;">
      <em>{{note}}</em>
    </div>
  </div>
</div>
